import React, { Component } from 'react';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
import {
    WhiteSpace,
    WingBlank,
    Flex,
    Icon,
    ListView,
    Button,
    Modal
} from 'antd-mobile';
import Moment from 'moment';
import NoLazyImg from "../../components/NoLazyImg/NoLazyImg";
import dianpusvg from "../../assets/img/dianpu.svg";
import rightsvg from "../../assets/img/right.svg";
import {Toast} from "antd-mobile/lib/index";
import './timeBuyItem.less';
class TimeBuyClassItem extends Component {
    constructor(props) {
        super(props);
        this.timer = null;
        const {v} = this.props;
        this.state = {
            d:"",
            showHour:"",
            m:"",
            s:"",
            now:this.props.nowTime
        }
    }
    componentDidMount(){
        setInterval(this.countTime, 1000, 1000)
        this.countTime()
    }
    countTime=()=>{
        //获取当前时间
        const {v} = this.props;
        // var date = new Date();
        // var now = date.getTime();
        var now = this.state.now;
        //设置截止时间
        var end = v.endTime;
        var start = v.startTime;
        let seconds = parseInt((end - now) / 1000);
        // 总的小时数
        let h = Math.floor(seconds / 60 / 60);
        // 天数
        let d = parseInt(h / 24);
        // 显示的小时数
        let showHour = Math.floor(h - d * 24);
        let m = Math.floor((seconds - h * 60 * 60) / 60);
        let s = Math.floor((seconds - h * 60 * 60 - m * 60));
        if (seconds < 0) {
            h = 0;
            m = 0;
            s = 0;
            d = 0;
            showHour = 0;
        }
        this.setState({
            d:d,
            showHour:showHour,
            m:m,
            s:s,
            now:now+1000
        })
    }
    render() {
        const {v} = this.props;
        const {d,showHour,m,s}=this.state;
        let timeBuyStatus="";
        let mashangButton=false;
        let qiangguangButton=false;
        if(v.activityInventory>0){
            timeBuyStatus = '马上抢';
            mashangButton=true;
        }else{
            timeBuyStatus = '已抢光';
            qiangguangButton=true;
        }
        return <div>
            {this.props.showTime?<Flex justify="center" style={{backgroundColor:"#F7F7F7",padding:".3rem 0",fontSize:".25rem"}}>
                距结束
                <span className="timeBuy_time">{d<10?"0"+d:d}</span> 天
                <span className="timeBuy_time">{showHour<10?"0"+showHour:showHour}</span>  :
                <span className="timeBuy_time">{m<10?"0"+m:m}</span>:
                <span className="timeBuy_time">{s<10?"0"+s:s}</span>
            </Flex>:""}
            
                <WingBlank  style={{paddingBottom:".3rem",paddingTop:".3rem",borderBottom:"1px solid #e5e5e5"}}>
                    <Flex>
                        <div style={{width:"2rem",height:"2rem",marginRight:".2rem",padding:".2rem"}} onClick={()=>{
                            this.props.dispatch(routerRedux.push({
                                pathname: `/goodsDetail/${v.specId}`,
                            }));
                        }}>
                            <NoLazyImg src={v.goodsPicture} style={{width:"2rem",height:"2rem",marginRight:".2rem",padding:".2rem"}} />
                        </div>

                        <div style={{width:"100%"}}>
                            <div style={{fontSize:".3rem",lineHeight:".45rem",marginBottom:".2rem"}} className="timeBuyTitle" onClick={()=>{
                                this.props.dispatch(routerRedux.push({
                                    pathname: `/goodsDetail/${v.specId}`,
                                }));
                            }}>{v.goodsName}</div>
                            {v.activityList[0]? <Flex style={{marginBottom:".1rem"}}>
                                {v.activityList.map((a,b)=>{
                                    return <div key={b} style={{color:"#F8BE59",border:"1px solid #F8BE59",padding:".1rem",marginRight:".2rem"}}>
                                        {a.name}
                                    </div>
                                })}
                            </Flex>:""}
                            <Flex style={{marginBottom:".4rem"}} onClick={()=>{
                                this.props.dispatch(routerRedux.push({
                                    pathname: `/goodsDetail/${v.specId}`,
                                }));
                            }}>
                                {v.isSelf==1?<div style={{border:"1px solid #F17878",color:"#F17878",padding:".05rem",borderRadius:".1rem",marginRight:".2rem"}}>自营</div>:""}
                                {v.activityInventory==0?<Flex style={{color:"#ff0036"}}>
                                    { Moment(this.props.nowTime-v.startTime).format(' h小时mm分') }抢光{v.activityInventory +v.selledNum>10000?(v.activityInventory +v.selledNum)/10000+"件":(v.activityInventory +v.selledNum)+"件"}
                                </Flex>: <Flex justify="between" className="jindu">
                                    <span style={{color:"#ff0036",marginLeft:".1rem"}}>已抢{v.selledNum}件</span>
                                    <span style={{color:"#999"}}>{v.sellRate+"%"}</span>
                                    <div className="jinduOne" style={{width:`${v.sellRate+"%"}`}}></div>
                                </Flex>}
                            </Flex>
                            <Flex justify="between">
                                {v.activityInventory==0?<div style={{color:"#e5e5e5"}} onClick={()=>{
                                    this.props.dispatch(routerRedux.push({
                                        pathname: `/goodsDetail/${v.specId}`,
                                    }));
                                }}>
                                    ¥<span style={{fontSize:".4rem"}}>{v.activityPrice }</span><span style={{color:"#999",textDecoration:"line-through",marginLeft:".2rem"}}>¥{v.goodsPrice }</span>
                                </div>: <div style={{color:"#ff0036"}} onClick={()=>{
                                    this.props.dispatch(routerRedux.push({
                                        pathname: `/goodsDetail/${v.specId}`,
                                    }));
                                }}>
                                    ¥<span style={{fontSize:".4rem"}}>{v.activityPrice}</span><span style={{color:"#999",textDecoration:"line-through",marginLeft:".2rem"}}>¥{v.goodsPrice}</span>
                                </div>}


                                {mashangButton&&<Button type='ghost' size='small' inline style={{backgroundColor:"#ff0036",color:"#fff",borderRadius:".5rem"}} onClick={()=>{
                                    this.props.dispatch(routerRedux.push({
                                        pathname: `/goodsDetail/${v.specId}`,
                                    }));
                                }}>{timeBuyStatus}</Button>}
                                {qiangguangButton&&<Button  size='small' inline style={{backgroundColor:"#e5e5e5",color:"#fff",borderRadius:".5rem"}}>{timeBuyStatus}</Button>}
                            </Flex>
                        </div>
                    </Flex>
                </WingBlank>
        </div>
    }
}

export default connect(({ timeBuy }) => ({ timeBuy }))(TimeBuyClassItem);
